import React from  'react'
import ReactDOM from 'react-dom'
import * as SysRolePermissionAction  from '../../actions/SysRolePermissionAction';
import { connect }  from 'react-redux';

import _ from 'lodash'

class SysRoleEdit extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  componentDidUpdate() {
    // console.log(this.props.permissions)
  }

  onDataSubmit() {
    var data = this.state.data;

    if(this.props.isEdit){
      this.props.onDataUpdate(data);
    }
    else{
      this.props.onDataCreate(data);
    }
  }

  onChange(event,key){
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  onPermissionDownClick(){
    this.props.dispatch(
      SysRolePermissionAction.loadSysRolePermissionDataAsync()
    )
  }

  onLiClick(data){
    var addPermissions = this.state.data.permissions;
    var isTrue = false;
    if(!addPermissions){
      addPermissions = [];
    }

    addPermissions.forEach(function(permission, index) {
      if(permission.name == data.name){
        isTrue = true;
      }
    })

    if(!isTrue){
      addPermissions.push(data);
      this.state.data.permissions = addPermissions;
      var data = this.state.data;

      this.setState({
        data:data
      })

      if(this.props.isEdit){
        this.props.onDataUpdate(data);
      }
    }
  }

  onPermissionDelete(data) {
    var addPermissions = this.state.data.permissions;
    _.remove(addPermissions, function(permission) {
      return permission.name == data.name
    })

    this.state.data.permissions = addPermissions;

    this.setState({
      data:this.state.data
    })

    this.props.dispatch(
      SysRolePermissionAction.deleteSysRolePermissionDataAsync({
        role_id: this.props.data.id,
        name: data.name
      })
    )
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.permissions) {
      // console.log(this.props.permissions)
      var permissions = this.props.permissions;
      permissions.forEach(function(data, index) {
        content.push((
            <li onClick={(event)=> self.onLiClick(data)}>{data.name}</li>
        ))
      })
    }
    return content
  }

  renderButton() {
    if (this.props.hideBtn) {
      return ""
    }else {
      return (
        <div className="modal-footer role-footer" >
          <button type="button" className="btn btn-default" data-dismiss="modal">返回</button>
          <button type="button" className="btn btn-primary"
                  onClick={(event)=> this.onDataSubmit()}>保存</button>
        </div>
      )
    }
  }

  renderAddPermissions() {
    var self = this;

    if(this.state.data.permissions){
      return this.state.data.permissions.map(function(data) {
        return (
          <tr>
            <td>{data.name}</td>
            <td><a onClick={(event)=>self.onPermissionDelete(data)}>删除</a></td>
          </tr>
        )
      })
    }
    return "";
  }


  render(){
    var self = this;

    return (
      <div className="modal fade" id="SysRoleEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">角色管理</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="role-name">角色名称</label>
                {this.props.hideBtn?<input ref="name" type="text" className="form-control"
                        id="role-name" placeholder="角色名称" value={self.state.data.name}
                        onChange={(event)=>this.onChange(event, "name")} disabled/>:<input ref="name" type="text" className="form-control"
                                id="role-name" placeholder="角色名称" value={self.state.data.name}
                                onChange={(event)=>this.onChange(event, "name")}/>}

            </div>

            <div className="form-group">
              <label for="role-url-permission">API权限</label>
              <div className="dropdown">
                <button className="btn btn-default dropdown-toggle" type="button" ref="roleUrlPermissionDown"
                        id='role-url-permission-down' data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" onClick={(event)=> this.onPermissionDownClick()} >
                  API权限
                  <span className="caret"></span>
                </button>
                <ul ref="roleUrlPermission" id="role-url-permission"  className="dropdown-menu" aria-labelledby="role-url-permission">
                      {this.renderList()}
                </ul>
              </div>
            </div>

            <div className="sys-role-url-permission">
              <table ref="permissionTable" className="table table-bordered">
                <thead>
                  <tr>
                    <th>已选API</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {self.renderAddPermissions()}
                </tbody>
              </table>
            </div>


              <input ref="roleId" value={self.props.data.id} hidden/>
            </div>
            {self.renderButton()}
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { permissions: state.sysrolePermissions }
}

export default connect(mapStateToProps)(SysRoleEdit);
